{extend name="admin@index_layout"/}
{block name="main"}
<style>
    .layui-form-label {
        width: 130px !important;
    }

    .layui-form-item .layui-input-inline {
        width: 268px !important;
    }

    .item-upgrade {
        margin-left: -30px;
    }

    .item-upgrade .layui-input-inline, .item-ratio .layui-input-inline {
        width: 66px !important;
    }

    .number-input {
        text-align: center;
    }

    .desc .layui-elem-quote {
        margin-top: 20px;
    }

    .desc p {
        font-size: 16px;
    }
</style>
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab layui-tab-card">
            <div class="layui-col-lg8 layui-col-md8 layui-tab-content">
                <div class="layui-card-header"><h2>分销说明</h2></div>
                <blockquote class="layui-elem-quote">
                    <h3>角色说明</h3>
                </blockquote>
                <p style="font-size: 16px;">
                    不同角色代表推客享受该角色下的比例收益。如果升级了，后续的收益比例按升级后的算。比如普通推客、高级推客等</p>
                <blockquote class="layui-elem-quote">
                    <h3>订单类型？</h3>
                </blockquote>
                <p style="font-size: 16px;">自购： 自己下单的商品订单为自购<br/>分享： 分享给消费者购买</p>
                <blockquote class="layui-elem-quote">
                    <h3>分销佣金是什么？</h3>
                </blockquote>
                <p style="font-size: 16px;">当你邀请了下级推客时，你的下级推客出单，你可以获得额外提成。</p>

                <form class="layui-form level-form" method="post" id="levelForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">分销指数</label>
                        <div class="layui-input-block">
                            {volist name="type" id="v"}
                            <input lay-filter="type" type="radio" name="type" value="{$key}" title="{$v}" {if
                                   $key==$info['type']}checked='' {/if}>
                            {/volist}
                        </div>
                    </div>
                    <hr class="layui-bg-red"/>

                    <div class="layui-form-item">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="level[0][name]"
                                   value="{$info['level'][0]['name']|default=''}" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">等级图标</label>
                        <div class="layui-input-inline item-icon">
                            <div class="icon">
                                {notempty name="$info['level'][0]['icon']"}
                                <div class="file-item thumbnail">
                                    <img data-original="{$info['level'][0]['icon']|get_file_path|default='__STATIC__/admin/img/none.png'}"
                                         src="{$info['level'][0]['icon']|get_file_path|default='__STATIC__/admin/img/none.png'}"
                                         width="100"
                                         style="max-height: 100px;">
                                    <i class="iconfont icon-delete_fill remove-picture"
                                       data-id="{$info['level'][0]['icon']}"></i>
                                </div>
                                {/notempty}
                            </div>
                            <input type="hidden" class="layui-input level-icon" name="level[0][icon]"
                                   value="{$info['level'][0]['icon']|default=''}">
                            <button class="layui-btn icon-upload icon-upload-0" lay-data="{accept: 'images'}">
                                上传图片
                            </button>
                        </div>
                    </div>
                    <div class="item-ratio">
                        <div class="layui-form-item">
                            <label class="layui-form-label">分享赚/自买返比例</label>
                            <div class="layui-input-inline">
                                <input class="layui-input number-input" type="number" min="0" max="100"
                                       name="level[0][ratio]" value="{$info['level'][0]['ratio']|default=0}"
                                       autocomplete="off"/>
                            </div>
                            <div class="layui-form-mid">%</div>

                            <div class="ratio-one">
                                <label class="layui-form-label">直推一级</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input number-input" type="number" min="0" max="100"
                                           name="level[0][ratio_one]" value="{$info['level'][0]['ratio_one']|default=0}"
                                           autocomplete="off"/>
                                </div>
                                <div class="layui-form-mid">%</div>
                            </div>


                        </div>
                    </div>

                    <hr class="layui-bg-red"/>

                    <div class="layui-form-item">
                        <label class="layui-form-label">做任务完成升级</label>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">任务一：</label>
                        <div class="layui-input-inline item-upgrade">
                            <label class="layui-form-label">邀请有效推客达到</label>
                            <div class="layui-input-inline">
                                <input class="layui-input number-input" type="number" min="0" max="100"
                                       name="invite" value="{$invite|default=0}"
                                       autocomplete="off"/>
                            </div>
                            <div class="layui-form-mid">人</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">任务二：</label>
                        <div class="layui-input-inline item-upgrade">
                            <label class="layui-form-label">推广结算收益达到</label>
                            <div class="layui-input-inline">
                                <input class="layui-input number-input" type="number" min="0" name="income"
                                       value="{$income|default=0}"
                                       autocomplete="off"/>
                            </div>
                            <div class="layui-form-mid">元</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">推客任务升级条件</label>
                        <div class="layui-input-block">
                            <input lay-filter="task_condition" type="radio" name="task_condition" value="0"
                                   title="通过联系客服升级等级" {if $task_condition== 0} checked='' {/if}>
                            <input lay-filter="task_condition" type="radio" name="task_condition" value="1"
                                   title="完成任一个任务即可升级" {if $task_condition== 1} checked='' {/if}>
                            <input lay-filter="task_condition" type="radio" name="task_condition" value="2"
                                   title="须同时完成任务一和任务二" {if $task_condition== 2} checked='' {/if}>
                        </div>
                    </div>

                    <hr class="layui-bg-red"/>

                    <div class="layui-form-item">
                        <label class="layui-form-label"
                               style="width: 220px !important;">任务完成后即可升级至下一等级</label>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="level[1][name]"
                                   value="{$info['level'][1]['name']|default=''}" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">等级图标</label>
                        <div class="layui-input-inline item-icon">
                            <div class="icon">
                                {notempty name="$info['level'][1]['icon']"}
                                <div class="file-item thumbnail">
                                    <img data-original="{$info['level'][1]['icon']|get_file_path|default='__STATIC__/admin/img/none.png'}"
                                         src="{$info['level'][1]['icon']|get_file_path|default='__STATIC__/admin/img/none.png'}"
                                         width="100"
                                         style="max-height: 100px;">
                                    <i class="iconfont icon-delete_fill remove-picture"
                                       data-id="{$info['level'][1]['icon']}"></i>
                                </div>
                                {/notempty}
                            </div>
                            <input type="hidden" class="layui-input level-icon" name="level[1][icon]"
                                   value="{$info['level'][1]['icon']|default=''}">
                            <button class="layui-btn icon-upload icon-upload-0" lay-data="{accept: 'images'}">
                                上传图片
                            </button>
                        </div>
                    </div>

                    <div class="item-ratio">
                        <div class="item-ratio">
                            <div class="layui-form-item">
                                <label class="layui-form-label">分享赚/自买返比例</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input number-input" type="number" min="0" max="100"
                                           name="level[1][ratio]" value="{$info['level'][1]['ratio']|default=0}"
                                           autocomplete="off"/>
                                </div>
                                <div class="layui-form-mid">%</div>

                                <div class="ratio-one">
                                    <label class="layui-form-label">直推一级</label>
                                    <div class="layui-input-inline">
                                        <input class="layui-input number-input" type="number" min="0" max="100"
                                               name="level[1][ratio_one]"
                                               value="{$info['level'][1]['ratio_one']|default=0}"
                                               autocomplete="off"/>
                                    </div>
                                    <div class="layui-form-mid">%</div>
                                </div>


                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn " lay-submit="" lay-filter="settingFormSubmit"
                                    target-form="level-form">提交
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-col-lg4 layui-col-md4 layui-tab-content desc" style="padding: 20px 40px;">
                <img style="width: 100%; margin-top: 40px;" src="__STATIC__/common/img/fenxiao.png" alt="">
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['element', 'form', 'upload'], function () {
        var form = layui.form, upload = layui.upload;

        form.on('radio(type)', function (data) {
            var type = data.value;
            hideOption(type)
        });

        hideOption('{$info.type}')

        function hideOption(type) {
            switch (parseInt(type)) {
                case 1:
                    $('.ratio-one').show();
                    break;
                case 2:
                    $('.ratio-one').show();
                    break;
                default:
                    $('.ratio-one').hide();
            }
        }

        //初始化上传
        initUpload();

        function initUpload() {

            upload.render({
                elem: '.icon-upload',
                url: '{:url("attachment/upload/upload", ["dir" => "images", "module" => "distribution"])}',
                done: function (res, index, upload) {
                    var item = this.item, parent = item.parent();
                    if (res.code == 0) {
                        var html = '<div class="file-item thumbnail"><img src="' + res.path + '" width="100" style="max-height: 100px;" ><i class="iconfont icon-delete_fill remove-picture" data-id="' + res.id + '" onclick="removeIcon(this)" ></i></div>';
                        parent.find('.icon').html(html);
                        parent.find('.level-icon').val(res.id);
                        bindMouseEvents();
                    }
                }
            });

        }

        window.removeImage = function (obj) {
            var parent = $(obj).parent().parent().parent();
            parent.find('.level-image').val('');
            parent.find('.image').html('')
        }

        window.removeIcon = function (obj) {
            var parent = $(obj).parent().parent().parent();
            parent.find('.level-icon').val('');
            parent.find('.icon').html('')
        }

        function bindMouseEvents() {
            $('.item-image .thumbnail img').off('mouseover mouseout').on('mouseover', function (e) {
                var imgSrc = $(this).attr('src');
                layer.tips('<img width=150 style="max-height: 200px;" src="' + imgSrc + '">', this, {tips: [1, '#fff']});
            }).on('mouseout', function (e) {
                layer.closeAll();
            });

            $('.item-icon .thumbnail img').off('mouseover mouseout').on('mouseover', function (e) {
                var imgSrc = $(this).attr('src');
                layer.tips('<img width=150 style="max-height: 200px;" src="' + imgSrc + '">', this, {tips: [1, '#fff']});
            }).on('mouseout', function (e) {
                layer.closeAll();
            });
        }

        // 初始化时绑定鼠标悬停事件
        bindMouseEvents();

        form.on('submit(settingFormSubmit)', function (data) {
            var index = layer.load(0);
            var url = '{:url("form")}';
            $.post(url, $('.level-form').serialize()).success(function (res) {
                layer.close(index);
                layer.msg(res.msg, {time: 1000}, function () {
                    parent.layer.closeAll();
                });
            });
            return false;
        });
    });

    $(document).ready(function () {
        $('#levelForm').on('submit', function (event) {
            // 获取触发提交的按钮
            const submitButton = $(this).find('button[type="submit"]');
            const clickedButton = $(event.originalEvent.submitter);

            // 检查触发提交的按钮是否为提交按钮
            if (!clickedButton.is(submitButton)) {
                event.preventDefault(); // 阻止表单提交
            }
        });

        $('.item-image .remove-picture').click(function (e) {
            e.preventDefault(); // 阻止默认行为
            var parent = $(this).parent().parent().parent();
            parent.find('.level-image').val(''); // 清空图片输入框的值
            parent.find('.image').html(''); // 移除显示的图片
        });
        $('.item-icon .remove-picture').click(function (e) {
            e.preventDefault(); // 阻止默认行为
            var parent = $(this).parent().parent().parent();
            parent.find('.level-icon').val(''); // 清空图片输入框的值
            parent.find('.icon').html(''); // 移除显示的图片
        });


    });
</script>

{/block}
